<template>
    <el-select
      class="input-default-width w-container"
      size="large"
      placeholder="搜索组委会"
      clearable
      filterable
      remote
      :remote-method="handleRemoteMethod"
      :loading="loading"
    >
      <el-option
        v-for="item in data"
        :key="item"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
  </template>
  
  <script  setup>
  import { getAgents } from "@/api/manage/organcommitmenu";
  import { ref, onMounted } from "vue";
  const data = ref([]);
  const loading = ref(false);
  
  /**
   * 远程搜索
   */
  const handleRemoteMethod = async (query) => {
    if (!query) {
      return;
    }
    loading.value = true;
    let res = await getAgents({
      // query
      agentName: query,
    });
    if (res.success) {
      data.value = res.entityList.map((item) => {
        return {
          label: item.name,
          value: item.userId,
        };
      });
    } else {
      data.value = [];
    }
    loading.value = false;
  };
  </script>
  
  <style lang="scss" scoped>
  .w-container {
    --el-input-width: 132px !important;
    :deep(.el-input) {
      --el-input-width: 132px !important;
    }
  }
  </style>